<template>
<!--  <div id="home" >-->
<!--    <vue-particles-->
<!--        color="#dedede"-->
<!--        :particleOpacity="0.7"-->
<!--        :particlesNumber="40"-->
<!--        shapeType="star"-->
<!--        :particleSize="4"-->
<!--        linesColor="#FFFFFF"-->
<!--        :linesWidth="2"-->
<!--        :lineLinked="true"-->
<!--        :lineOpacity="0.4"-->
<!--        :linesDistance="150"-->
<!--        :moveSpeed="3"-->
<!--        :hoverEffect="true"-->
<!--        hoverMode="grab"-->
<!--        :clickEffect="true"-->
<!--        clickMode="push"-->
<!--        class="cash"-->
<!--    >-->
<!--    </vue-particles>-->
<!--    <div class="header">-->
<!--      <div class="nav-item">WORKSPACE-->
<!--        <svg class="icon" aria-hidden="true">-->
<!--          <use xlink:href="#icon-renwu"></use>-->
<!--        </svg>-->
<!--      </div>-->
<!--      <div class="nav-item">Manage workspace-->
<!--        <svg class="icon" aria-hidden="true">-->
<!--          <use xlink:href="#icon-xinxi"></use>-->
<!--        </svg>-->
<!--      </div>-->
<!--      <div class="nav-item">Back-->
<!--        <svg class="icon" aria-hidden="true">-->
<!--          <use xlink:href="#icon-faxian"></use>-->
<!--        </svg>-->
<!--      </div>-->
<!--      <div class="nav-item">Homepage-->
<!--        <svg class="icon" aria-hidden="true">-->
<!--          <use xlink:href="#icon-shouye"></use>-->
<!--        </svg>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="main">-->
<!--      <div id="app" >-->
<!--        <div style="display: flex; width: 100%; height: 100%">-->
<!--          <div style="width: 20%">-->
<!--            <el-aside width="100%" style="background-color: rgb(233, 241, 246)">-->
<!--              <el-menu :router=true :default-active="$route.name" unique-opened="true">-->

<!--              </el-menu>-->
<!--            </el-aside>-->
<!--          </div>-->
<!--          <div style="width: 80%">-->
<!--            <router-view></router-view>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <!--      <div class="search_input_name">-->
      <!--        <button @click="search" class="button-get">search</button>-->
      <!--        <input type="text" placeholder="input name" v-model="input_name"/>-->
      <!--      </div>-->
      <div class="search_input_name">
        <button @click="search" class="button-get">search</button>
        <input type="text" placeholder="input name" v-model="input_name"/>
        <button @click="cancel" class="button-get" style="float: right; margin-right: 10px">cancel</button>
      </div>
      <div class="form" style="overflow-y: auto">
        <div class="form3" v-for="(item,index) in project_name" :key="index">
          {{index+1}}   {{item}}
          <button class="button_run" @click="run">run{{index+1}}</button>
        </div>
      </div>
<!--    </div>-->
<!--  </div>-->
</template>

<script>
export default {
  name: "project",
  data() {
    return {
      show_flag: false,
      add_get_list: true,
      project_name: ['zcy', 'demo', 'demo2', 'demo3', 'demo4', 'demo5', 'demo6', 'demo4', 'demo5', 'demo6'],
      project_names: ['zcy', 'demo', 'demo2', 'demo3', 'demo4', 'demo5', 'demo6', 'demo4', 'demo5', 'demo6'],
      input_name: '',
      a: '',
      num: ''
      // loading: true
    }
  },
  created() {},
  methods: {
    search() {
      this.a = this.project_name.length;
      for (var i = 0; i < this.a; i++) {
        // console.log(this.project_name[i]);
        if (this.project_name[i] === this.input_name) {
          for (var j = 0; j < this.a; j++) {
            this.project_name.pop()
          }
          this.project_name.push(this.input_name);
          this.input_name = '';
        }
      }
    },
    cancel() {
      this.project_name = this.project_names;
    },
    run() {
      console.log('run' + this.num);
      // console.log(button.name + '111');
      // Button
      // let btn
      // btn = sender as Button
      // if( btn != null ){
      //   console.log( btn.id)
      // }
    }
  }
}
</script>

<style scoped>
ul,
li {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 25px;
}
#home {
  width: 100vw;
  height: 100vh;
  background: url("../assets/view2.jpg") no-repeat;
  background-size: cover;
  background-position: left;
  overflow: hidden;
  opacity:0.8;
  font-family: FZShuTi;
  font-size: 35px;
}
.projects{
  height: 600px;
}
.cash {
  position:fixed;
  top:180px;
  width:100%;
}
.button_run{
  margin: 0 0 0 0;
}
.header {
  height: 50px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.search_input_name {
  margin: -270px 0px 0 98px;
  width: 1164px;
  /*height: 550px;*/
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  background-color:rgba(255,255,255,0.7);
  /*margin: -25px 0px 0px 0px;*/
  padding: 10px 0 5px 28px;
  float: left;
  display: block;
}
.nav-item {
  height: 100%;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px 1px #ffb6c1;
  cursor: pointer;
}

.nav-item:active,

button:active{
  background-color: lightblue;
  color: #ffffff;
}
.button-get{
  margin: 0 0 0 0;
}
.button-post{
  margin: 0 45px 0 15px;
}
.title:active ~ .lt-menu {
  display: block;
}

.main {
  width: 100%;
  height: 100%;
  position: relative;
}

.form {
  width: 1164px;
  height: 552px;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  background-color:rgba(255,255,255,0.7);
  margin: 35px 0px 0px 98px;
  padding: 0px 0 0 50px;
}
.form1 {
  width: 800px;
  height: 545px;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  background-color:rgba(255,255,255,0.7);
  margin: -10px 0px 0px 235px;
  padding: 55px 0 0 180px;
}
.form3{
  float: left;
  width: 1060px;
  height: 30px;
  border-color: #cecec9;
  margin: 30px 0 0 0;
  font-size: 27px;
  color: #25272d80;
}
input {
  height: 35px;
  border: 1px solid #ccc;
  /* -webkit-box-shadow: 1px 1px 1px 1px #ffb6c1; */
  /* box-shadow: 1px 1px 1px 1px #f1f0f0; */
  margin: 8px 0px 0 10px;
  width: 230px;
  font-family: FZShuTi;
  font-size: 23px;
}

button{
  height: 45px;
  width: 26px;
  border: 1px solid #fff;
  margin-bottom: 30px;
  width: 113px;
  cursor: pointer;
  background-color: #ffffff;
  font-family: FZShuTi;
  font-size: 26px;
  color: #98a4a8;
}

.form div{
  display: flex;
  align-items: center;
  justify-content: space-between;/*弹性布局*/
}
#app {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: left;
  overflow: hidden;
  opacity:0.8;
  position: absolute;
  display: flex;
  position: absolute;
  justify-content: center;
  left: 0;
  top: 0;
  overflow: auto;
}
</style>
